<!-- 求助大厅界面 -->
<template>
  <div class="help-hall">
    <navigationBar></navigationBar>
    <div class="over">
      <h1>
        <span style="display: inline-block; vertical-align: middle"
          >求助大厅</span
        >
      </h1>
    </div>
    <div class="inp" @click.stop="() => false">
      <el-input
      ref="search-input"
        placeholder="搜索"
        class="inputt"
        v-model="filter"
        @keyup.enter.native="search"
        @focus="isShowHot = true"
        clearable
      >
        <el-button
          style="margin-top: 0px !important; margin: 0px !important"
          @click="search"
          slot="append"
          icon="el-icon-search"
        ></el-button>
      </el-input>
      <div class="search-pop" v-show="isShowHot">
        <el-card shadow="always">
          <!-- card body -->
          <dl style="text-align: left">
            <dt>热门搜索</dt>
            <dd
              v-for="(hot, index) in hotList"
              :key="index + 1"
              @click="clickHot(hot)"
            >
              <span>{{ index + 1 }}</span
              >{{ hot }}
            </dd>
          </dl>
        </el-card>
      </div>
    </div>
    <div class="mq">
      <el-tabs v-model="categoryId" @tab-click="handleCatClick">
        <el-tab-pane label="全部分类" name="first"> </el-tab-pane>
        <el-tab-pane
          v-for="cat in categoryList"
          :label="cat.name"
          :name="cat.id + ''"
          :key="cat.id"
        ></el-tab-pane>
      </el-tabs>
      <el-tabs v-model="sort" @tab-click="handleSortClick" class="sort-tabs">
        <el-tab-pane label="默认排序" name="first"> </el-tab-pane>
        <el-tab-pane label="最高报酬" name="reward"> </el-tab-pane>
        <el-tab-pane label="最新发布" name="time"> </el-tab-pane>
      </el-tabs>
    </div>
    <helpListVue :list="helpList"></helpListVue>
    <el-pagination
      class="ep"
      :page-size="params.pageSize"
      :current-page="params.pageNum"
      @current-change="pageChange"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import navigationBar from "@/components/navigationBar.vue";
import detailMsg from "@/components/detailMsg.vue";
import helpListVue from "@/components/helpList.vue";
import { getAllCategory } from "../api/category";
import { getAllHelp, helpSearch } from "../api/help";
import { getHotSearch, updateHotSearch } from "../api/hotSearch";
export default {
  name: "HelpHall",
  components: {
    navigationBar,
    detailMsg,
    helpListVue,
  },
  data() {
    return {
      isShowHot: false,
      filter: "",
      categoryId: "first",
      sort: "first",
      categoryList: [],
      helpList: [],
      hotList: [],
      total: 100,
      params: {
        pageNum: 1,
        pageSize: 9,
      },
    };
  },
  methods: {
    routeChange() {
      let categoryId = this.$route.query.categoryId;
      // console.log("初始categoryId", categoryId);

      let sort = this.$route.query.sort;
      // console.log("初始排序", sort);
      if (categoryId == null) categoryId = "first";
      this.categoryId = categoryId;
      if (sort == null) sort = "first";
      this.sort = sort;
    },
    handleCatClick(tab, e) {
      // console.log(tab.name);
      // this.params.categoryId = tab.name
      this.getHelpList();
    },
    handleSortClick(tab, e) {
      // console.log(tab.name);
      // this.params.sort = tab.name
      this.getHelpList();
    },
    getCategoryList() {
      getAllCategory().then((res) => {
        // console.log(res);
        this.categoryList = res;
        // console.log("分类列表：", res);
      });
    },
    getHelpList() {
      let params = {
        pageNum: this.params.pageNum,
        pageSize: this.params.pageSize,
        categoryId: this.categoryId == "first" ? "" : this.categoryId,
        sort: this.sort == "first" ? "" : this.sort,
      };
      console.log("params：", params);
      getAllHelp(params).then((res) => {
        this.helpList = res.rows;
        this.total = res.total;
        // console.log("求助列表", res.rows);
      });
    },
    pageChange(currentPage) {
      // console.log("第" + currentPage + "页");
      this.$set(this.params, "pageNum", currentPage);
    },
    search() {
      this.$refs['search-input'].blur()
      this.isShowHot = false
      console.log(this.filter);
      let params = {
        pageNum: this.params.pageNum,
        pageSize: this.params.pageSize,
        filter: this.filter,
        categoryId: this.categoryId == "first" ? "" : this.categoryId,
        sort: this.sort == "first" ? "" : this.sort,
      };
      helpSearch(params).then((res) => {
        // console.log("搜索结果：", res);
        this.helpList = res.rows;
      });
      updateHotSearch(this.filter).then(() => {});
    },
    clickHot(hot) {
      // console.log("filter:",hot)
      this.filter = hot;
      this.isShowHot = false;
    },
  },
  computed: {},
  watch: {
    $route: "routeChange",
    params: {
      deep: true,
      handler: function () {
        // console.log("监控到变化", this.params);
        this.getHelpList();
      },
    },
    isShowHot(newV, oldV) {
      if (newV) {
        document.body.addEventListener("click", () => {
          this.isShowHot = false;
        });
        console.log(this.hotList);
        // if (this.hotList.length == 0) {
        //   getHotSearch().then((res) => {
        //     this.hotList = res;
        //     // console.log("热搜：", res);
        //   });
        // }
        getHotSearch().then((res) => {
          this.hotList = res;
          // console.log("热搜：", res);
        });
      } else {
        document.body.removeEventListener("click", () => {});
      }
    },
  },
  created() {
    this.routeChange();
    this.getCategoryList();
    this.getHelpList();
  },
  mounted() {},
};
</script>

<style scoped >
* {
  margin: 0;
  padding: 0;
}
.over {
  height: 150px;
  background-color: rgb(167, 225, 248);
  margin-bottom: 50px;
  width: 100%;
  min-width: 1192px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
h1 {
  text-align: center;
  letter-spacing: 20px;
  color: white;
  font-size: 40px;
}
.over img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 10px;
}
li {
  list-style: none;
  color: gray;
  position: relative;

  margin-left: 40px;
  margin-bottom: 20px;
}

.same {
  background-color: skyblue;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
  height: 38px;
  width: 100px;
}
.mq {
  width: 1000px;

  margin: 20px auto 100px auto;
}
/* .showdetailMsg{
  border:1px solid skyblue;
  height: 530px;
  position: relative;
  top:-30px;

} */
.inputt {
  width: 800px;
}
.inp {
  text-align: center;
  width: 800px;
  margin: 80px auto 60px auto;
}

.help-hall {
  width: 100%;
  min-width: 1192px;
  background: white;
  min-height: 100vh;
}
.ep {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.sort-tabs /deep/ .el-tabs__nav-wrap::after {
  position: static !important;
}
.sort-tabs /deep/ .el-tabs__item.is-top {
  border-radius: 5px;
  color: #61666d;
  padding: 0px;
  margin-right: 20px;
  width: 85px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.sort-tabs /deep/ .el-tabs__item.is-active {
  color: #00aeec;
  background-color: #dff6fd;
}
.sort-tabs /deep/ .el-tabs__item.is-top:hover {
  color: #00aeec;
}

.sort-tabs /deep/ .el-tabs__active-bar {
  background-color: transparent !important;
}
.sort-tabs {
  margin-top: 30px;
}
div /deep/ .el-input-group__append {
  padding: 0px !important;
  background-color: #4662d9;
  color: white;
  border-color: #4662d9;
}
.search-pop {
  position: relative;
}
.inp .el-card {
  width: 740px;
  position: absolute;
  z-index: 3;
}
.inp /deep/ .is-always-shadow {
  margin: 0px auto !important;
}
dd {
  padding-left: 40px;
  margin-top: 15px;
  cursor: pointer;
}
dd span {
  color: orangered;
  margin-right: 10px;
}
dd:nth-child(3) span {
  opacity: 0.8;
}
dd:nth-child(4) span {
  opacity: 0.7;
}
dd:nth-child(5) span {
  opacity: 0.6;
}
dd:nth-child(6) span {
  opacity: 0.6;
}
dd:hover {
  color: #409eff;
  opacity: 1;
}
dt {
  margin-bottom: 20px;
}
</style>